
import * as React from 'react'
import './index.less'
import { Switch, Button, Input,Table, Modal,Form } from 'antd';
interface Props {

}
interface listItem {
    key: number,
    select: boolean,
    from: string,
    goUrl: string,
}
interface State {
    showAdd: boolean,
    editObj: listItem | null,
    editIndex:number,
    list: Array<listItem>
}
class App extends React.Component<Props, State>{
    form: any;
    constructor(props: any) {
        super(props)
        this.state = {
            list:[],
            editObj: null,
            editIndex:0,
            showAdd: false
        }
        if(chrome&& chrome.storage){
            let self =this;
            chrome.storage.sync.get(['list'], function(result) {
                if(result&&result.list){
                    self.setState({
                        list:Array.isArray(result.list)?result.list:[]
                    })
                }
            });
        }
        this.handleCheck = this.handleCheck.bind(this);
        this.delList = this.delList.bind(this);
        this.handleAdd = this.handleAdd.bind(this);
        this.sotrage = this.sotrage.bind(this);
        this.form= React.createRef();
    }
    
    sotrage=()=>{
        if(chrome&& chrome.storage){
            chrome.storage.sync.set({list:this.state.list}, function() {});
            chrome.runtime.sendMessage({type:"list",data:this.state.list},function(responce){
                console.log(responce)
            })
        }
    }
    
    handleCheck = (index: number, checked: boolean) => {
        this.setState({
            list: this.state.list.map((v, i) => {
                return {
                    ...v,
                    select: i === index ? checked : v.select
                }
            })
        })
        setTimeout(() => {
            this.sotrage()
        }, 0);
    }
    handleAdd=()=>{
        console.log(this.form)
        let values=this.form.current.getFieldsValue();
        let list=[...this.state.list];
        if(this.state.editObj){
            list[this.state.editIndex]={
                ...this.state.editObj,
                ...values
            }
        }else{
            list.push({
                key:this.state.list.length,
                ...values
            })
           
        }
        this.setState({
            list:list,
            showAdd:false
        })
        setTimeout(() => {
            this.sotrage()
        }, 0);
    }
    delList = (index: number) => {
        this.setState({
            list: this.state.list.filter((v, i) => {
                return i !== index
            }).map((v,i)=>{
                return {
                    ...v,
                    key:i
                }
            })
        })
        setTimeout(() => {
            this.sotrage()
        }, 0);
    }
    render() {
        
        return (
            <div className="pd10">
                <Button className="add" onClick={() => {
                    this.setState({
                        showAdd: true,
                        editObj: null
                    });
                    setTimeout(() => {
                        this.form.current.setFieldsValue({
                            from:"",
                            goUrl:""
                        })
                    }, 0);
                }
                }>+ 添加代理</Button>
                <Table key="table" pagination={false} dataSource={this.state.list}>
                    <Table.Column title="状态" dataIndex="status" render={(value, record: any, index) => {
                        return <Switch checked={record.select} onChange={(val) => {
                            this.handleCheck(index, val)
                        }}></Switch>
                    }} />
                    <Table.Column title="原地址" width="200" render={(value, record: any, index) => {
                        return <div style={{width:"200px",wordWrap: 'break-word', wordBreak: 'break-word'}}>
                            {record.from}
                        </div>
                    }} />
                    <Table.Column title="代理地址"  width="200" render={(value, record: any, index) => {
                        return <div style={{width:"200px",wordWrap: 'break-word', wordBreak: 'break-word'}}>
                            {record.goUrl}
                        </div>
                    }}
                     />
                    <Table.Column title="操作"  width="200" dataIndex="goUrl" render={(value, record: any, index) => {
                        return <React.Fragment>
                            <Button type="link" size="small" style={{padding:"10px"}} onClick={() => {
                                this.setState({
                                    showAdd: true,
                                    editObj: record,
                                    editIndex:index
                                })
                                setTimeout(() => {
                                    this.form.current.setFieldsValue(record)
                                }, 0);
                            }}>编辑</Button>
                            <Button type="link" size="small" style={{padding:"10px"}} onClick={() => {
                                this.delList(index)
                            }}>删除</Button>
                        </React.Fragment>
                    }} />
                </Table>
                <Modal
                    title={this.state.editObj?"编辑代理":"添加代理"}
                    visible={this.state.showAdd}
                    onOk={()=>{
                        this.handleAdd()
                    }}
                    cancelText="取消"
                    okText="确定"
                    onCancel={()=>{
                        this.setState({
                            showAdd: false,
                            editObj: null
                        })
                    }}
                    >
                    <Form  ref={this.form} >
                        <Form.Item labelCol={
                            {span:5}
                        }  name="from" label="原地址" rules={[{ required: true }]}>
                            <Input  placeholder="请输入原地址" />
                        </Form.Item>
                        <Form.Item labelCol={
                            {span:5}
                        }  name="goUrl"  label="代理地址" rules={[{ required: true }]}>
                           <Input  placeholder="请输入代理地址" />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
export default App;